<template>
  <div class="add_commondity">
    <!-- 步骤条 -->
    <header>
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="商品信息"></el-step>
        <el-step title="商品详情"></el-step>
        <el-step title="其他设置"></el-step>
        <el-step title="规格设置"></el-step>
      </el-steps>
    </header>
    <!-- 动态组件 -->
    <main>
      <keep-alive>
        <component v-bind:is="getCName" ref="activeComponent"></component>
      </keep-alive>
    </main>
    <!-- 操作按钮 -->
    <footer class="option">
      <el-button v-if="active !== 0" @click="last">上一步</el-button>
      <el-button type="primary" v-if="active === 3" @click="submit"
        >提交</el-button
      >
      <el-button type="primary" v-else @click="next">下一步</el-button>
    </footer>
  </div>
</template>

<script>
import TheForm from "./commponents/TheForm";
import TheOrderEdit from "./commponents/TheOrderEdit";
import TheSpecificationEdit from "./commponents/TheSpecificationEdit";
import Wang from "./commponents/Wang";
export default {
  components: {
    TheForm,
    Wang,
    TheOrderEdit,
    TheSpecificationEdit,
  },
  data() {
    return {
      active: 0,
      componentsList: [
        { cName: "TheForm", active: 0 },
        { cName: "Wang", active: 1 },
        { cName: "TheOrderEdit", active: 2 },
        { cName: "TheSpecificationEdit", active: 3 },
      ],
      formObj: {},
    };
  },
  computed: {
    getCName() {
      return this.componentsList.filter(
        (item) => item.active === this.active
      )[0].cName;
    },
  },
  methods: {
    last() {
      this.active -= 1;
    },
    next() {
      switch (this.active) {
        case 0:
          this.$refs.activeComponent.submitForm("ruleForm").then(
            (res) => {
              console.log(res, "res");
              // assign 合并对象
              Object.assign(this.formObj, this.$refs.activeComponent.ruleForm);
              this.active += 1;
            },
            (err) => {
              console.log(err, "err");
            }
          );
          break;
        case 1:
          if (this.$refs.activeComponent.editorContent) {
            console.log(this.$refs, "拷贝");
            Object.assign(this.formObj, {
              content: this.$refs.activeComponent.editorContent,
            });
            this.active += 1;
          } else {
            this.$message.error("请输入商品详情");
          }
          break;
        case 2:
          console.log(this.$refs.activeComponent.validate());
          if (this.$refs.activeComponent.validate()) {
            // 合并其他设置
            console.log(this.$refs, "赋值");
            Object.assign(this.formObj, {
              sort: this.$refs.activeComponent.sort,
              integral: this.$refs.activeComponent.integral,
              virtualSales: this.$refs.activeComponent.virtualSales,
            });
            this.active += 1;
          } else {
            this.$message.error("请输入三个数字");
          }
          break;
      }
    },

    submit() {
      console.log(this.formObj);
      alert("提交成功");
      this.$router.push("../shop/children/index");
      //this.$router.push({
      //  path: "../add/index",
      // query: {
      //   formObj: this.formObj,
      // }
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.add_commondity {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    height: 100px;
  }
  main {
    flex: 1;
    overflow: auto;
  }
  footer {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      height: max-content;
    }
  }
}
</style>
